<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo3</title>
    <script src="https://cdn.bootcss.com/angular.js/1.6.4/angular.js"></script>
    <style>
        div{
            padding: 6px;
            font-size: 20px;
            line-height: 26px;
        }
        div.container {
            width: 500px;
            border: 1px solid black;
        }
        div.my-info {
            border-bottom: 1px solid blue;
        }
        input {
            font-size: 20px;
            height: 26px;
        }
    </style>
</head>
<body>
    <div ng-app="MyApp">
        <h3>3.scope = {}</h3>
        <div class="container" ng-controller="MyController">
            <div class="my-info">
                <h3>父级scope</h3>
                我的名字是：<span ng-bind="name"></span>
                <br/>我的年龄是：<span ng-bind="age"></span>
                <br/>在这里修改名字：<input type='text' ng-model='name'>
            </div>
            <div class="my-directive" my-directive my-name="{{name}}" age="age"  change-my-age="changeAge()"></div>
        </div>
    </div>

<script>
    angular.module("MyApp", [])
        .controller("MyController", function ($scope) {
            $scope.name = "Bill";
            $scope.age = 20;
            $scope.changeAge = function(){
                $scope.age = 0;
            }
        })
        .directive("myDirective", function () {
            return {
                restrict: "AE",
                scope: {
                    name: '@myName',
                    age: '=',
                    changeAge: '&changeMyAge'
                },
                replace: true,
                template: "<div class='my-directive'>" +
                "<h3>自定义指令scope</h3>" +
                "我的名字是：<span ng-bind='name'></span><br/>" +
                "我的年龄是：<span ng-bind='age'></span><br/>" +
                "在这里修改名字：<input type='text' ng-model='name'><br/>" +
                "<button ng-click='changeAge()'>修改年龄</button>" +
                " </div>"
            };
            return obj;
        });
</script>

</body>
</html>